<template>
    <div class="type-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                系统管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="btn">
            <el-button color="#626aef" :dark="isDark" @click="addRoleDialog">添加角色</el-button>
            <el-button type="danger" :dark="isDark">批量作废角色</el-button>
            <el-button type="primary" :dark="isDark" @click="flush">刷新界面</el-button>
        </div>
        <div class="tab">
            <el-table :data="roleList" style="width: 100%;padding: 20px" :row-class-name="tableRowClassName">
                <el-table-column label="序号" type="index" width="100" />
                <el-table-column label="角色名称" prop="roleName" width="200" />
                <el-table-column label="状态" prop="flagInvalid" width="100">
                    <template #default="scope">
                        <el-switch
                            disabled
                            v-model="scope.row.flagInvalid"
                            :active-value="0"
                            active-text="正常"
                            :inactive-value="1"
                            inactive-text="作废"
                            inline-prompt
                            class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="所属系统" prop="sysName" width="250" />
                <el-table-column label="操作人" prop="planetCreateUser" width="100" />
                <el-table-column label="操作时间" prop="planetCreateTime" width="300" />
                <el-table-column align="right" width="300">
                    <template #header>
                        <el-input v-model="roleName" size="default" placeholder="请输入名称，回车搜索" @keyup.enter="enterSearchRole" />
                    </template>
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                        <el-button v-if="scope.row.flagInvalid == 1" size="small" type="primary" @click="handleShowRole(scope.$index, scope.row)">启用</el-button>
                        <el-button v-if="scope.row.flagInvalid == 0" size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">作废</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="addDialogFormVisible" >
            <template #header="{ titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass">添加角色</h4>
                </div>
            </template>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="roleName" autocomplete="off" placeholder="请输入角色名称" />
                </el-form-item>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialogFormVisible = false;roleName = '' ">取消</el-button>
                <el-button type="primary" @click="confirmAddRole">
                    点击添加
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { useDark } from '@vueuse/core'
import { $http } from "@/utils/axios";
import { onMounted, reactive, ref, computed } from "vue";
import { gatewayPrefix,userMiddleContextPath } from '@/utils/commConstance'
import { ElMessage,ElNotification,ElMessageBox  } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
const roleList = ref([])
const addDialogFormVisible=ref(false)
const formLabelWidth = '140px'
const roleName=ref('')
onMounted(()=>{
    getRoleList()
})
const isDark = ref(useDark())

const getRoleList = ()=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/getRoleList?role=${roleName.value}&isAll=true`).then(res=>{
        roleList.value = res
    })
}
const tableRowClassName = ({row,rowIndex})=>{
    if(row.flagInvalid === 1){
        return 'warning-row'
    }
}
const addRoleDialog = ()=>{
    addDialogFormVisible.value=true
}
// 添加
const confirmAddRole = ()=>{
    if(roleName.value == null || roleName.value == ''){
        return ElMessage.error('角色名称不能为空')
    }
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/addRole?role=${roleName.value}`).then(res=>{
        if(res){
            ElMessage.success('添加成功')
            getRoleList()
            addDialogFormVisible.value = false
            roleName.value=''
        }else{
            ElMessage.error('添加失败')
        }
    })
}
// 搜索
const enterSearchRole = ()=>{
    if(roleName.value === null || roleName.value === ''){
        return ElMessage.warning('请输入有效的内容!!!')
    }
    getRoleList()
}
const flush=()=>{
    getRoleList()
}
const handleEdit = (index, row) => {
    console.log(index, row)
}
// 作废
const handleDelete = (index, row) => {
    ElMessageBox.confirm(
        '确认作废该角色?',
        '警告提示',
        {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ).then(() => {
        $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/delRole/${row.roleId}`).then(res=>{
            if(res){
                ElMessage.success('作废成功')
                getRoleList()
            }else{
                ElMessage.error('作废失败')
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消操作',
        })
    })
}
// 启用
const handleShowRole = (index,row)=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/showRole/${row.roleId}`).then(res=>{
        if(res){
            ElMessage.success('启用成功')
            getRoleList()
        }else{
            ElMessage.error('启用失败')
        }
    })
}
</script>

<style lang="less">
.btn{
    margin-top: 20px;
    margin-bottom: 20px;
}
.el-table .warning-row {
    color: red;
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>